<template>
  <view class="terminal-state">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <view class="flex terminal-state__header">
      <u-search
        class="search_Bank"
        placeholder="请输入开户银行名称"
        v-model="bankName"
        shape="square"
        bg-color="#f6f6f6"
        :show-action="false"
        @search="searchFn"
      ></u-search>
    </view>
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <view
          class="terminal-state__item"
          v-for="(item, index) in list"
          :key="index"
        >
          <u-cell-group>
            <!-- :title="item && item.name ? item.name : '中国银行锦绣支行'" -->
            <u-cell-item
              :title="item.name"
              :arrow="false"
              @click="getItem(item)"
            >
              <u-image
                slot="icon"
                :src="thumb"
                width="40"
                height="40"
                class="card__icon mr-10"
              ></u-image>
            </u-cell-item>
          </u-cell-group>
        </view>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      src: '/static/image/home/icon_scan.png',
      thumb: '/static/image/home/icon_bank_logo_default.png',
      pageNo: 1,
      pageSize: '20',
      requestBody: {
        name: '',
        bankCode: '',
        provinceCode: '',
        cityCode: '',
      },
      bankName: '',
      scrollTop: 0,
      status: 'loadmore',
      list: [],
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  // onLoad自带一个参数
  onLoad(options) {
    console.log('options----->76', options);
    this.requestBody.provinceCode = options.province;
    this.requestBody.cityCode = options.city;
    this.requestBody.bankCode = options.bankCode;
  },
  mounted() {
    // this.requestBody.provinceCode = this.$route.query.province;
    // this.requestBody.cityCode = this.$route.query.city;
    // this.requestBody.bankCode = this.$route.query.bankCode;
    this.getBankList();
  },
  methods: {
    searchFn(e) {
      console.log('e----->searchFn', e);
      this.requestBody.name = e;
      this.pageNo = 1;
      this.list = [];
      this.getBankList();
    },
    getItem(item) {
      const eventChannel = this.getOpenerEventChannel();
      console.log('eventChannel----->98', eventChannel);
      // 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
      eventChannel.emit('acceptDataFromOpenedPage', {
        data: item,
      });
      console.log('item----->88', item);
      // 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
      uni.navigateBack({
        delta: 1,
      });
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.getBankList();
    },
    // 获取支行列表数据
    getBankList() {
      let categories = [];
      let _that = this;
      _that.$zx.common_api
        .getBankBranchList(this.pageNo, this.pageSize, this.requestBody)
        .then((data) => {
          console.log('getBankBranchList----->118', data);
          _that.list = _that.list.concat(data);
          if (data && data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.terminal-state {
  &__header {
    padding: 20rpx;
    background-color: white;
  }
  .search_Bank {
    font-size: 28rpx;
  }
}
</style>
